<!DOCTYPE html>
<html>
<head>
    <style>
    body {
      background-color: white;
      font-family: Arial, sans-serif;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }
    #locationInfo {
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin: 20px 0;
      min-width: 300px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 12px 24px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 10px 2px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #45a049;
    }
    .coordinates {
      font-weight: bold;
      color: #2c3e50;
    }
  </style>
</head>
<body>
<h2>地理位置获取演示</h2>
<div id="locationInfo">点击下方按钮获取您的位置信息</div>
<button onclick="getLocation()">获取我的位置</button>

<script>
    var locationInfo = document.getElementById("locationInfo");

    function getLocation() {
      if (navigator.geolocation) {
        locationInfo.innerHTML = "正在获取位置信息...";
        navigator.geolocation.getCurrentPosition(
          showPosition,
          showError,
          {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
          }
        );
      } else {
        locationInfo.innerHTML = "您的浏览器不支持地理位置功能";
      }
    }

    function showPosition(position) {
      locationInfo.innerHTML = `
        <h3>您的位置信息</h3>
        <p><span class="coordinates">纬度:</span> ${position.coords.latitude.toFixed(6)}</p>
        <p><span class="coordinates">经度:</span> ${position.coords.longitude.toFixed(6)}</p>
        <p><span class="coordinates">精度:</span> ${position.coords.accuracy} 米</p>
        <p>获取时间: ${new Date(position.timestamp).toLocaleString()}</p>
      `;

      // 可以在这里添加地图显示代码
      // showOnMap(position.coords.latitude, position.coords.longitude);
    }

    function showError(error) {
      let errorMessage = "";
      switch(error.code) {
        case error.PERMISSION_DENIED:
          errorMessage = "用户拒绝了位置请求";
          break;
        case error.POSITION_UNAVAILABLE:
          errorMessage = "位置信息不可用";
          break;
        case error.TIMEOUT:
          errorMessage = "获取位置请求超时";
          break;
        case error.UNKNOWN_ERROR:
          errorMessage = "发生未知错误";
          break;
